<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模板</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      /**
     *  经典面试题
            1)react/vue中的key有什么作用?(key的内部原理是什么)
            2)为什么遍历列表时,key最好不要用index?
            
            1.虚拟DOM中key的作用:
                1)简单讲:key是虚拟DOM对象的标识,在更新显示时key起着极其重要的作用
                
                2)详细讲:当状态中的数据发生变化的时候,react会根据'新数据'生成'新的虚拟DOM'
                        随后React进行'新虚拟DOM'域'旧虚拟DOM'的diff比较,比较规则如下

                    a.旧虚拟DOM中找到了新虚拟DOM相同的key:
                        (1)若虚拟DOM中内容没有变化,则直接使用之前的真实DOM
                        (2)若虚拟DOM中内容变化了,则生成新的DOM,随后替换掉页面之前的真实DOM

                    b.旧虚拟DOM未找到与新虚拟DOM相同的key
                        根据数据创建新的真实DOM,随后渲染到页面

            2.用index作为key可能会引发的问题
                1.若对数据进行:逆序添加、逆序删除等等破坏顺序性的操作
                    会产生没有必要的真实DOM更新 ==> 界面效果没问题,但效率低
                
                2.如果结构中还包含输入类DOM
                    会产生错误DOM更新 ==> 界面有问题

                3.注意! 如果不存在对数据的逆序添加、逆序删除等破坏顺序性的操作
                    仅用于渲染列表用于展示,使用index作为key是没问题的

            3.开发中如何选择key?
                1.最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值
                2.如果确认只是简单的数据展示,也是可以使用index的
     */

      class Lists extends React.Component {
        state = {
          persons: [
            { id: 1, name: "小红", age: 18 },
            { id: 2, name: "雄安王", age: 222 },
          ],
        };

        add = () => {
          const persons = this.state.persons;
          const emp = { id: 3, name: "小王", age: 100 };
          this.setState({
            persons: [emp, ...persons],
          });
        };

        render() {
          const { persons } = this.state;
          return (
            <div>
              <h1>展示人员信息</h1>
              <button onClick={this.add}>添加一个小王</button>
              <h2>使用index(索引值)作为key</h2>
              <ul>
                {persons.map((person, index) => {
                  return (
                    <li key={index}>
                      {person.name}---{person.age}
                      <input type="text" />
                    </li>
                  );
                })}
              </ul>
              <hr />
              <hr />
              <h2>使用id(数据唯一标识)作为key</h2>
              <ul>
                {persons.map((person) => {
                  return (
                    <li key={person.id}>
                      {person.name}--{person.age}
                      <input type="text" />
                    </li>
                  );
                })}
              </ul>
            </div>
          );
        }
      }

      ReactDOM.render(<Lists />, document.querySelector("#test"));
    </script>
  </body>
</html>
